<template>
  <Card class="bomCard">
    <Col span="24" class="title">模具履历</Col>
    <div class="bom_box">
      <Row>
        <Col span="24">
        <div class="searchBox">
          <Form :model="formBox" label-position="top">
            <Row>
              <Col span="24">
                <Row>
                  <Col span="6" class="item_right">
                    <FormItem label="制造日期">
                      <Input v-model="dateParams.manufactureDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <Col span="6" class="item_right">
                    <FormItem label="验收日期">
                      <Input v-model="dateParams.acceptDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <!-- <Col span="6" class="item_right">
                    <FormItem label="转固日期">
                      <Input v-model="dateParams.toRegularDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <Col span="6" class="item_right">
                    <FormItem label="报废日期">
                      <Input v-model="dateParams.scrapData" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col> -->
                </Row>
              </Col>
              <Col span="24">
                <div class="tabBox">
                  <Tabs v-model="tabName1"  @on-click="tabClick" name="lvli" id="1">
                    <TabPane label="维护" name="维护">
                      <Table :columns="columns" :data="tableData" stripe tab="lvli"></Table>
                      <div class="pageWrap mt16">
                        <pageLeftTitle :total="total" />
                        <Page
                          :total="total"
                          :page-size="pageSize"
                          :page-size-opts="pageSizeOption"
                          :current="pageNum"
                          @on-change="changePageNum"
                          @on-page-size-change="changePageSize"
                          show-sizer
                          show-total
                        />
                      </div>
                    </TabPane>
                    <TabPane label="维修" name="维修">
                      <Table :columns="columns" :data="tableData" stripe tab="lvli"></Table>
                      <div class="pageWrap mt16">
                        <pageLeftTitle :total="total" />
                        <Page
                          :total="total"
                          :page-size="pageSize"
                          :page-size-opts="pageSizeOption"
                          :current="pageNum"
                          @on-change="changePageNum"
                          @on-page-size-change="changePageSize"
                          show-sizer
                          show-total
                        />
                      </div>
                    </TabPane>
                    <!-- <TabPane label="使用" name="使用">
                      <Table :columns="columns" :data="tableData" stripe ></Table>
                    </TabPane> -->
                  </Tabs>
                 
                </div>
              </Col>
            </Row>
          </Form>
        </div>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>
export default {
  name: "moldDetail",
  props: ['dateParams'],
  data() {
    return{
      pageSize:10,
      pageNum:1,
      total:0,
      taskLevelList:[
        {
          label:'一级保养',
          value:1
        },
        {
          label:'二级保养',
          value:2
        },
        {
          label:'三级保养',
          value:3
        },
      ],
      columns:[],
      columns1: [
        {
          title: '日期',
          key: 'createTime'
        },
        {
          title: '维保单号',
          key: 'servicingNo'
        },
        {
          title: '维保级别',
          key: 'itemLevel',
          render: (h, params) => {
            return h('div', [
              h('span', {}, this.taskLevelList.find(val => val.value == params.row.itemLevel).label)
            ])
          }
        },
        {
          title: '维保人',
          key: 'operateName'
        },
        {
          title: '维护工时(min)',
          key: 'taskTime'
        }/*,
        {
          title: '状态',
          key: 'ad'
        },*/
        // {
        //   title: '计划名称',
        //   key: 'orderNo'
        // },
        // {
        //   title: '操作记录',
        //   key: 'archivesTypeStr'
        // },
      ],
      columns2: [
        {
          title: '日期',
          key: 'archivesDate'
        },
        {
          title: '记录单号',
          key: 'servicingNo'
        },
        {
          title: '信息内容',
          key: 'archivesTypeStr'
        },
        {
          title: '记录人',
          key: 'maintenanceBy'
        }
      ],
      columns3: [
        {
          title: '日期',
          key: 'createTime'
        },
        {
          title: '维修单号',
          key: 'repairOrderNo'
        },
        {
          title: '故障分类',
          key: 'faultTypeList'
        },
        {
          title: '维修人',
          key: 'repairedByName'
        },
        {
          title: '维修工时(min)',
          key: 'maintainTime'
        }/*,
        {
          title: '状态',
          key: 'ad'
        },*/
        // {
        //   title: '操作记录',
        //   key: 'archivesTypeStr'
        // },
      ],
      // moldInfo:{},
      tableData: [],
      formBox:{},
      tabName1:'维护',
    }
  },
  mounted() {
    this.getMoldDetail();
    this.tabClick('维护')
  },
  methods:{
    getMoldDetail(){
      this.axios({
        url:'/dms/moldinfo/selectByMoldCode',
        method:'get',
        params:{
          moldCode: this.$route.query.mmoldCode,
        }
      }).then(res=>{
        if (res.code==200) {
          this.dateParams=res.data;
        }
      })
    },
    tabClick(val){
      let archivesTypes = []
      let orderBy;
      switch (val) {
        case '维护':
          this.columns = this.columns1
          archivesTypes = [8]
          orderBy='DESC'
              break;
        case '维修':
          orderBy='DESC'
          this.columns = this.columns3
          archivesTypes = [9]
            break;
        case '使用':
          orderBy='ASC'
          this.columns = this.columns2
          archivesTypes = [1,2,3,4,5,6,7]
          break;
      }
      this.getDataList(archivesTypes,orderBy,val)
    },
     //分页
    changeNum() {
      this.pageNum = 1;
      this.getDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getDataList();
    },

    changePageNum(val) {
      this.pageNum = val;
      this.getDataList();
    },
    getDataList(archivesTypes,orderBy,type) {
      let url=type=='维护'?'/dms/servicingTask/queryServicingTaskList':'/dms/moldMaintenanceHall/queryMoldMaintainHallList'
      this.axios({
        method: 'post',
        url,
        data: {
          pageNum:this.pageNum,
          pageNo:this.pageNum,
          pageSize:this.pageSize,
          moldCode: this.$route.query.mmoldCode,
          mmoldCode: this.$route.query.mmoldCode,
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bomCard{
  min-height: calc(100vh - 130px);
  .bom_box{
    .searchBox{
      .tabBox{
        padding: 0 10px;
        margin-top: 10px;
        /deep/ .ivu-tabs-bar{
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
      /deep/ .ivu-form .ivu-form-item-label{
        padding: 0 0 5px 0 !important;
      }
      .item_right{
        padding: 0 10px;
        .ivu-form-item{
          margin-bottom: 15px;
        }
      }
    }
  }
  .title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
</style>
